<template>
    <a-card :bordered="false">
        <div>
            <!--编写Ant Design组件，组件需要在官方文件查找修改使用-->
        <a-row style="margin-top: 8px" :gutter="[16,24]">
          <a-col :span="6">
            <span>主体名称:</span>
            <a-input placeholder="请输入主体名称" style="width: 200px;margin-left: 10px" v-model="requestParam.companyName"/>
          </a-col >
          <a-col :span="6">
            <span>注册手机号:</span>
            <a-input placeholder="请输入注册手机号" style="width: 200px;margin-left: 10px" v-model="requestParam.mobilePhone"/>
          </a-col>
          <template v-if="toggleSearchStatus">
          <a-col :span="6">
            <span>是否会员:</span>
            <a-select  placeholder="请输入是否会员" style="width: 200px;margin-left: 10px">
              <a-select-option value="1">是</a-select-option>
              <a-select-option value="0">不是</a-select-option>
            </a-select>
          </a-col>
          <a-col :span="6">
            <span>用户状态:</span>
            <a-select  placeholder="请输入用户状态" style="width: 200px;margin-left: 10px">
              <a-select-option value="1">可用</a-select-option>
              <a-select-option value="0">冻结</a-select-option>
            </a-select>
          </a-col>
          </template>
          <a-col :span="6">
            <a-button type="primary" icon="search" @click="loadUser">
              查询
            </a-button>
            <a-button type="primary" icon="reload" style="margin-left: 8px">
              重置
            </a-button>
            <a @click="handleToggleSearch" style="margin-left: 8px">
              {{ toggleSearchStatus ? '收起' : '展开' }}
              <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
            </a>
          </a-col>
        </a-row>

          <a-row :gutter="[16,24]">
            <a-button type="primary" icon="reload" style="margin-left: 6px">
              导出
            </a-button>
          </a-row>

          <a-row :gutter="[16,24]" style="margin-top: 30px">
          <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
            <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{selectedRowKeys.length}}</a>项&nbsp;&nbsp;
            <a style="margin-left: 24px" @click="clearAll" >清空</a>
          </div>

          <a-table rowKey="id"
                   :data-source="data"
                   :pagination="pagination"
                   :scroll="{ x: 'calc(700px + 50%)', y: 500 }"
                   :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}">
            <a-table-column title="主体名称" data-index="companyName" width="150px"></a-table-column>
            <a-table-column title="注册手机号" data-index="mobilePhone" width="150px"></a-table-column>
            <a-table-column title="注册时间" data-index="registerTime" width="150px"></a-table-column>
            <a-table-column title="是否会员" width="150px">
              <template slot-scope="text,record,index" >
                <span style="color: #00ff80" v-if="record.memberFlag==1">是</span>
                <span style="color:red" v-else>否</span>
              </template>
            </a-table-column>
            <a-table-column title="信息是否完整"  width="150px">
              <template slot-scope="text,record,index" >
                <span style="color: #00ff80" v-if="record.perfectFlag==1">已完善</span>
                <span style="color:red" v-else>未完善</span>
              </template>
            </a-table-column>
            <a-table-column title="用户状态" data-index="user_status" width="150px">
              <template slot-scope="text,record,index" >
                <span style="color: #00ff80" v-if="record.userStatus==1">正常</span>
                <span style="color:red" v-else>已冻结</span>
              </template>
            </a-table-column>
            <a-table-column title="信息完善时间" data-index="perfectTime" width="150px"></a-table-column>
            <a-table-column title="使用到期时间" data-index="probationTime" width="150px"></a-table-column>
            <a-table-column title="购买会员时间" data-index="memberTime" width="150px"></a-table-column>
            <a-table-column title="会员到期时间" data-index="memberExpiredTime" width="150px"></a-table-column>
            <a-table-column title="操作" width="110px" fixed="right">
              <template slot-scope="text,record,index">
                <a @click="editUserMethod(record)">编辑</a>
                <a-dropdown>
                  <a >
                    更多 <a-icon type="down"/>
                  </a>
                  <a-menu slot="overlay">
                    <a-menu-item>
                      <a href="javascript:;" >详情</a>
                    </a-menu-item>
                    <a-menu-item>
                      <a href="javascript:;" >删除</a>
                    </a-menu-item>
                  </a-menu>
                </a-dropdown>
              </template>
            </a-table-column>
          </a-table>
          </a-row>

          <a-pagination v-model="requestParam.current" :total="requestParam.total" :pageSize="requestParam.pageSize" @change="onChange"  style="margin-top: 30px" show-less-items/>
          <a-modal v-model="ShowModal" title="会员编辑" width="40%" >
            <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules" :model="editUser">
              <a-form-model-item prop="companyName" label="主体名称:"><a-input  style="width: 200px" v-model="editUser.companyName" /></a-form-model-item>
              <a-form-model-item label="注册手机号:"><a-input  style="width: 200px" v-model="editUser.mobilePhone" disabled/></a-form-model-item>
              <a-form-model-item label="注册时间:"><a-input  style="width: 200px" v-model="editUser.registerTime" disabled/></a-form-model-item>
              <a-form-model-item prop="memberFlag" label="是否会员:">
                <a-radio-group v-model="editUser.memberFlag">
                  <a-radio-button :value="1">
                    会员
                  </a-radio-button>
                  <a-radio-button :value="0">
                    非会员
                  </a-radio-button>
                </a-radio-group>
              </a-form-model-item>
              <a-form-model-item prop="perfectFlag" label="信息是否完善:">
                <a-radio-group v-model="editUser.perfectFlag">
                  <a-radio-button :value="1">
                    完善
                  </a-radio-button>
                  <a-radio-button :value="0">
                    未完善
                  </a-radio-button>
                </a-radio-group>
              </a-form-model-item>
              <a-form-model-item label="信息完善时间:"><a-input  style="width: 200px" v-model="editUser.perfectTime" disabled/></a-form-model-item>
              <a-form-model-item label="试用到期时间:"><a-input  style="width: 200px" v-model="editUser.probationTime" disabled/></a-form-model-item>
              <a-form-model-item label="购买会员时间:"><a-input  style="width: 200px" v-model="editUser.memberTime" disabled/></a-form-model-item>
              <a-form-model-item label="会员过期时间:"><a-input  style="width: 200px" v-model="editUser.memberExpiredTime" disabled/></a-form-model-item>
              <a-form-model-item label="用户状态:" prop="userStatus">
                <a-radio-group v-model="editUser.userStatus">
                  <a-radio-button :value="1">
                    正常
                  </a-radio-button>
                  <a-radio-button :value="0">
                    冻结
                  </a-radio-button>
                </a-radio-group>
              </a-form-model-item>
          </a-form-model>
          </a-modal>
        </div>
    </a-card>
</template>

<script>
    //定义引入的js插件
    import ARow from "ant-design-vue/es/grid/Row";
    import ACol from "ant-design-vue/es/grid/Col";
    import AFormModelItem from "ant-design-vue/es/form-model/FormItem";
    import {getAction} from '@/api/manage';
    export default {
      components: {AFormModelItem, ACol, ARow},
      data() {
        let validateDeptName = (rule, value, callback) => {
           console.log(value);
           console.log(rule);
          if (value === '') {
            callback(new Error('部门名称不能为空'));
          } else {
            callback();
          }
        };
            return {
                //定义组件中关联属性
              toggleSearchStatus:false,
              pagination:false,
              ShowModal:false,
              editUser:{companyName:'',},
              labelCol: { span: 6 },
              wrapperCol: { span: 16 },
              requestParam:{
                current: 1,
                pageSize: 5,
                total: 9,
                companyName:'',
                mobilePhone:'',
              },
              data: [],
              selectedRowKeys: [],
              selectedRows: [],
              rules: {
                companyName: [
                  { validator: validateDeptName, trigger: 'change' }
                ],
              },
            }
        },
        methods: {
            //定义组件事件关联方法
          handleToggleSearch(){
            this.toggleSearchStatus = !this.toggleSearchStatus;
          },
          editUserMethod(record){
            this.ShowModal=true
            this.editUser = Object.assign({},record)
          },
          onSelectChange(selectedRowKeys, selectionRows) {
            this.selectedRowKeys = selectedRowKeys;
            this.selectionRows = selectionRows;
          },
          clearAll(){
            this.selectedRowKeys=[];
          },
          loadUser(){
          console.log(this.requestParam)
            var url = "/njt-user-register/page"
            getAction(url,this.requestParam).then((res) => {
              // 在原生开发中获取后端响应数据是通过：res.data
              // 为什么现在不使用data就可以获取到后端响应数据
              // 原因：就是因为有响应拦截器，拦截器中已经处理了，将后端响应对象数据获取传入参数res
              console.log(res)
              if (res.success) {
                this.msg = res.result;
                this.data=res.result.records;
                this.requestParam.total=res.result.total;
              }
            })
          },
          onChange(){
            this.requestParam.current=this.current;
            this.loadUser();
          },
        },
        created() {//页面加载前执行的操作
            this.loadUser();
        }
    }
</script>